<template>
  <div class="vue-container">
    <div v-show="isShowPayButton" style="width:100%;position: fixed; background: rgba(4, 4, 4, 0.76);
    width: 100%;
    height: 100%;
    z-index: 1;">
      <div style="background: white !important;border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: fixed;
    width: 100%;
    height: 30%;
    bottom: 0px;">
        <div style="padding: 5% 5% 0 5% ;">温馨提示:</div>
        <div style="padding: 5% 5% 0 5% ;">
          <span>您需要支付0.5元或者分享到朋友圈才可以继续播放剩余内容.</span>
        </div>
        <div style="display: flex;justify-content:space-around;margin: 20px">
          <pay-button :money="0.5" @pay-ok="payed" @pay-failed="setNoOk">支付0.5元</pay-button>
          <mt-button @click="clickShare" class="iconfont iconpengyouquan" size="small">分享到朋友圈</mt-button>
        </div>
      </div>
    </div>

    <my-video ref="myVideo" :url="article.url" :should-be-stop="shouldBeStop"></my-video>

  </div>
</template>
<style lang="scss">
  @import "../assets/scss/detail.scss";
</style>
<script>
  import PayButton from './common/PayButton'
  import PayedUserList from './common/PayedUserList'
  import MyVideo from './MyVideo'
  import {getArticlePayedList,addUserToPayedList,getArticle} from '../api/api'
  export default {
    name:'video-viewer',
    components:{PayButton,PayedUserList,MyVideo},
    data(){
      return {
        id:'',//视频的id
        isShowPayButton:false,
        isPayed:false,

      }
    },
    props:{
      article:{
        type:Object,
        default:function(){
          return {

          }
        }
      },
      hasPayed:{
        type:Boolean,
        default:false
      }
    },
    watch:{
      hasPayed(){
        this.init();
      }
    },
    mounted(){
      this.id=this.getQueryString('id');

      this.init();

    },

    methods: {
      init(){
        if(this.hasPayed){
          this.setOk();
        }else{

        }
      },
      shouldBeStop(current, all) {
        if (current > all / 2&&this.hasPayed!=true) {
          this.isShowPayButton=true;
          return true;
        } else{
          return false;
        }


      },
      payed(orderId){
        let vm=this;
        let user = JSON.parse(sessionStorage.getItem('user'));
        addUserToPayedList({
          orderId: orderId,
          openid: sessionStorage.getItem('openid'),
          articleId: vm.id,
          headimgurl: user.headimgurl
        }).then((res) => {
          if (res.data.result) {

            vm.$emit('change-payed-user-list');

          }else{
            vm.setNoOk();
          }
        });
      },
      setOk() {
        let vm = this;
        vm.isShowPayButton = false;
        vm.$refs.myVideo.play();



      },
      share(){
        let vm=this;

        vm.isShowPayButton = false;
        vm.$refs.myVideo.play();
        vm.$emit('close-share-guid');
      },
      clickShare(){
        this.isShowPayButton=false;
        this.$emit('show-share-page');
      },
      setNoOk() {
        this.isPayed = false;
      }
    }

  }
  </script>

